<template>
	<view class="goodDetail">
		<view class="msg" v-if="detailList">
			<!-- 轮播图部分 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" circular>
				<swiper-item class="swiper-i" v-for="(item,index) in lunboList" :key="index">
					<image @click="yulan(item.pics_mid_url)" :src="item.pics_mid_url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 价格 -->
			<view class="price">
				￥{{detailList.goods_price}}
			</view>
			<!-- 描述+收藏 -->
			<view class="nameStar">
				<view class="name">
					{{detailList.goods_name}}
				</view>
				<view class="star">
					<view class="iconfont icon-star">	
					</view>
					<text>收藏</text>
					<button class="mybtn" open-type="share">收藏</button>
				</view>
			</view>
			<!-- 快递 -->
			<view class="car">
				快递：免运费
			</view>
		</view>
		<view class="sales">
			<view class="item1">
				<text>促销</text>
				<text>满300减30元</text>
			</view>
			<view class="item2">
				<text>已选</text>
				<text>黑色/S/1件</text>
			</view>
		</view>
		<view class="item">
			<text>送至</text>
			<text>广东省 广州市 海珠区></text>
		</view>
		<view class="introduce">
			<view class="tags">
				<view class="tag-i" @click="choosetag = 0" :class="{active:choosetag === 0}">
					图文介绍
				</view>
				<view class="tag-i" @click="choosetag = 1" :class="{active:choosetag === 1}">
					规格参数
				</view>
			</view>
			<view class="produce1" v-if="choosetag === 0">
				<view class="tuwen" v-html="detailList.goods_introduce">
				</view>
			</view>
			<view class="produce2" v-if="choosetag === 1">
				<view class="pro-i" v-for="(item,index) in detailList.attrs" :key="index">
					<view class="pro-i-i">
						{{item.attr_name}}
					</view>
					<view class="pro-i-i">
						{{item.attr_vals}}
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="foo1">
				<text class="iconfont icon-kefu"></text>
				联系客服
				<button class="kefubtn" open-type="contact">联系客服</button>
			</view>
			<view class="foo1" @click="toCart">
				<text class="iconfont icon-cart"></text>
				购物车
			</view>
			<view class="foo2 yellow" @click="addCart">
				加入购物车
			</view>
			<view class="foo2 red" @click="buyNow">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id:43982,
				detailList:undefined,
				lunboList:[],
				choosetag:0,
				cartList:[]
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetailList()
			this.cartList = uni.getStorageSync('cart') || []
		},
		onShareAppMessage() {
			return {
				title:'震惊！！！胡歌宣布已隐婚多年！！！'
			}
		},
		methods:{
			buyNow(){
				uni.navigateTo({
					url:'/pages/orderDetail/orderDetail?goods_id=' + this.id
				})
			},
			addCart(){
				var myIdx = this.cartList.findIndex(item=>{
					return item.goods_id === this.id
				})
				if(myIdx === -1){
					this.cartList.unshift({
						goods_id:this.id,
						num:1,
						isCheck:true
					})
				}else{
					this.cartList[myIdx].num += 1
				}
				uni.setStorageSync('cart',this.cartList)
				uni.showToast({
					title:'成功加入购物车！'
				})
			},
			toCart(){
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			async getDetailList(){
				const res = await this.$http({
					url:'/goods/detail?goods_id=' + this.id
				})
				console.log(res)
				this.detailList = res
				this.lunboList = res.pics
			},
			yulan(imgurl){
				uni.previewImage({
					current:imgurl,
					urls:this.lunboList.map(item=>{
						return item.pics_mid_url
					})
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color:#f4f4f4;
	}
	.goodDetail{
		width: 100%;
		padding-bottom: 100rpx;
		.msg{
			background-color: #fff;
			.swiper{
				width: 100%;
				height: 720rpx;
				.swiper-i{
					width: 100%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.price{
				margin-top: 47rpx;
				color: #eb4450;
				font-size: 24px;
				padding: 0 18rpx;
				margin-bottom: 43rpx;
			}
			.nameStar{
				padding-left: 18rpx;
				display: flex;
				.name{
					flex: 1;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					border-right: 1rpx solid #dddddd;
					padding-right: 40rpx;
				}
				.star{
					width: 140rpx;
					text-align: center;
					color: #999999;
					position: relative;
					.mybtn{
						position: absolute;
						left: 0;
						bottom: 0;
						top: 0;
						right: 0;
						opacity: 0;
					}
				}
			}
			.car{
				padding: 0 18rpx;
				color: #999999;
				margin: 40rpx 0 33rpx;
				padding-bottom: 25rpx;
			}
		}
		.sales{
			width: 100%;
			background-color: #fff;
			margin: 20rpx 0;
			padding: 0 16rpx;
			.item1,.item2{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				color: #404040;
			}
			.item1{
				text:nth-child(2){
					color: #ff5c94;
					margin-left: 40rpx;
				}
			}
			.item2{
				text:nth-child(2){
					color: #a89aa3;
					margin-left: 40rpx;
				}
			}
		}
		.item{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 16rpx;
			background-color: #fff;
			color: #404040;
			margin-bottom: 20rpx;
			text:nth-child(2){
				color: #a89aa3;
				margin-left: 40rpx;
			}
		}
		.introduce{
			width: 100%;
			background-color: #FFFFFF;
			padding: 0 16rpx;
			box-sizing: border-box;
			.tags{
				width: 100%;
				display: flex;
				.tag-i{
					flex: 1;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					&.active{
						color: #ff4055;
						border-bottom: 10rpx solid #ff4055;
					}
				}
			}
			.produce1{
				width: 100%;
			}
			.produce2{
				width: 100%;
				border-top: 1rpx solid #d1d1d1;
				border-left: 1rpx solid #d1d1d1;
				.pro-i{
					display: flex;
					.pro-i-i{
						width: 50%;
						color: #454341;
						min-height: 83rpx;
						font-size: 14px;
						border-bottom: 1rpx solid #d1d1d1;
						border-right: 1rpx solid #d1d1d1;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		.footer{
			width: 100%;
			height: 82rpx;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			.foo1{
				flex: 2;
				display: flex;
				flex-direction: column;
				text-align: center;
				font-size: 12px;
				position: relative;
				.kefubtn{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					opacity: 0;
				}
			}
			.foo2{
				flex: 3;
				color: #fff;
				text-align: center;
				line-height: 82rpx;
			}
		}
		.yellow{
			background-color: #ffb400;
		}
		.red{
			background-color: #ff2d4a;
		}
	}
</style>
